import React, { useState } from "react"
import { Globe, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

/**
 * 通用设置
 */
const GeneralSetting = () => {
  const [timezone, setTimezone] = useState("utc8")
  const [language, setLanguage] = useState("zh")

  const handleSaveSetting = () => {
    console.log(timezone, language)
  }

  return (
    <Card className="dark:bg-gray-800">
      <CardHeader>
        <CardTitle className="flex items-center">
          <Globe className="mr-2 h-5 w-5" />
          通用设置
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          <div>
            <Label htmlFor="timezone" className="text-sm font-medium text-gray-700 dark:text-gray-300">
              时区
            </Label>
            <Select value={timezone} onValueChange={setTimezone}>
              <SelectTrigger>
                <SelectValue placeholder="请选择时区" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="utc8">UTC+8 (北京时间)</SelectItem>
                <SelectItem value="tc0">TC+0 (格林威治时间)</SelectItem>
                <SelectItem value="utc5">UTC-5 (东部时间)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label className="text-sm font-medium text-gray-700 dark:text-gray-300">语言</Label>
            <div className="mt-2 space-y-2">
              <RadioGroup defaultValue="zh" value={language} onValueChange={setLanguage}>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="zh" id="zh" />
                  <Label htmlFor="zh">简体中文</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="en" id="en" />
                  <Label htmlFor="en">English</Label>
                </div>
              </RadioGroup>
            </div>
          </div>

          <div className="pt-4">
            <Button onClick={handleSaveSetting}>
              <Save className="mr-2 h-4 w-4" />
              保存设置
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export default GeneralSetting
